<template>
  <div class="home_index">
    <div style="display:flex;align-items: center;margin-bottom:10px">
      <p style="margin-right:5px;flex-shrink:0">子组件输入框</p>
      <el-input v-model="textVal" />
    </div>
    <el-button @click="checkVal">子组件按钮</el-button>
    <p>子组件val值：{{zujian2Val}}（通过2子组件发送事件改变）</p>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  data(){
    return {
      textVal:'',   //这是子组件自己得data值
      zujian2Val:'不变' //这个变量 在子组件1里面,我想通过zujian2 里面得按钮去改变他  现在有一个方法可以实现,就是通过父组件做一个中转站 但是太麻烦了,这还只有一层,如果组件嵌套多层就不美了
    }
  },
  components:{      //声明组件
  },
  created(){  
  },
  mounted(){
    //mounted这个函数是一个生命周期,created是初始化data后,dom生成之前
    //这个mounted 是dom生成之后 里面可以直接写js代码,这个东西就是dom加载完成之后 执行的一个函数
    //因为是函数 所以里面可以直接写js代码
    //这个$on 是监听的意思,只要这个$Bus实例 不销毁,会一直监听 
    //只要有地方用$Bus.$emit('zujian2Check')调用这个事件,这个地方就会执行
    //最后一步就是为了防止他一直执行,就这个页面已经关闭了,这个$on还在执行,这样就蛮占内存,多了之后网站就会崩,现在这样基本已经完成了,这个方法

    //$on去接受$emit()发送得事件 第一个参数是事件名称 后面可以跟一个函数
    //后面得函数可以用那个表达式  这个(里面接参数)
    this.$Bus.$on('zujian2Check',(val)=>{
      this.zujian2Val=val; console.log(val,'我是组件2发送得全局事件值,在组件1里接受')
    })
  },
  computed:{
    ...mapGetters({
      userInfo:"getUserInfo",
    }),
    
  },
  methods:{     //放一些函数(方法)      ... 为扩展运算符相当于是添加到这个对面里面去  this.getData() 使用这个方法  this.getNumber() 一样得意思 
    ...mapMutations({           
    }),
    ...mapActions({
      getNumber:'loginModule/getNumber',
      getUser:'loginModule/getUser'
    }),
    hanshu(){
      //可以这样搞,但是这样麻烦
    },
    checkVal(){
      //调这个方法,我想改变父组件里面得val 要做得效果是点按钮 通过子组件输入框改变父组件得val $emit方法 给父组件发送一个事件 相当于那些ui库里面得 后面可以跟参数 传一个值过去
      this.$emit('checkV',this.textVal);  //把这个值传过去 现在去父组件接收 复制这个方法名
    }
  },
}
</script>           
<style lang="scss" scoped>  
// scoped 只在这个页面有效得css样式  不污染全局
</style>